<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="assets/css/reset-global.css" />
  <link rel="stylesheet" href="assets/css/website.css" />
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/blog.css">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
  <body>
  <div th:include="pub_head"></div>
  <div class="content">
    <div class="contents">
      <div class="contentleft">
        <p>Content</p>
        <form action="">
          <div class="con1">
            <span>Enter you name:</span>
            <input type="text" id="name" value=""/>
          </div>
          <div class="con1">
            <span>Enter you email:</span>
            <input type="text" id="email" value="" />
          </div>
          <div class="con2">
            <span>Your message here:</span>
            <textarea name="message" id="message" cols="" rows=""></textarea>
          </div>
        </form>
        <div class="con3">
          <button type="button" id="sub">Submit</button>
        </div>
      </div>
      <div class="centerRight">
        <div class="centerrightOne">
          <a href="aboutUs.html"><img th:src="${modules[9].banners[0].imgUrl1}" /></a>
          <div class="count">
            <p class="p4">[[${modules[9].banners[0].title}]]</p>
            <div class="one-container">
              <div class="one-progress"></div>
            </div>
            <p>[[${modules[9].banners[0].description}]]</p>
          </div>
        </div>
        <div class="centerrightTwo">
          <p class="p4">[[${modules[10].module.name}]]</p>
          <div class="two-container">
            <div class="two-progress"></div>
          </div>
          <div class="centerrightTwos" th:each="user1:${modules[10].banners}">
            <div class="crtLeft">
              <a href="#"><img th:src="${user1.imgUrl1}" /></a>
            </div>
            <div class="crtRight">[[${user1.description}]]</div>
          </div>
        </div>
        <div class="centerrightThree">
          <p class="p4">[[${modules[11].module.name}]]</p>
          <div class="three-container">
            <div class="three-progress"></div>
          </div>
          <div class="dropdown">
            <div class="dropbtn">
              [[${modules[11].module.title}]]
              <span><img th:src="${modules[11].module.imgUrl1}" /></span>
            </div>
            <div class="dropdown-content">
              <a href="#">[[${modules[11].banners[0].title}]]</a>
              <a href="#">[[${modules[11].banners[1].title}]]</a>
              <a href="#">[[${modules[11].banners[2].title}]]</a>
            </div>
          </div>
        </div><!--centerrightThree-->
        <div class="centerrightFour">
          <p class="p4">[[${modules[12].module.name}]]</p>
          <div class="four-container">
            <div class="four-progress"></div>
          </div>
          <div class="centerrightFours">
            <div class="crfOne">
              <img th:each="i1:${#numbers.sequence(0,2)}" th:src="${modules[12].banners[i1].imgUrl1}" />
            </div>
            <div class="crfOne">
              <img th:each="i1:${#numbers.sequence(3,5)}" th:src="${modules[12].banners[i1].imgUrl1}" />
            </div>
            <div class="crfOne">
              <img th:each="i1:${#numbers.sequence(6,8)}" th:src="${modules[12].banners[i1].imgUrl1}" />
            </div>
            <div class="crfOne">
              <img th:each="i1:${#numbers.sequence(9,11)}" th:src="${modules[12].banners[i1].imgUrl1}" />
            </div>
          </div>
        </div>
        <div class="centerrightFive">
          <p class="p4">[[${modules[13].module.name}]]</p>
          <div class="four-container">
            <div class="four-progress"></div>
          </div>
          <div class="centerrightFives">
            <p class="may" th:each="user2:${modules[13].banners}">
                        <span><a href="#">
                            <img th:src="${user2.imgUrl1}"/>[[${user2.title}]]
                        </a></span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>


  <!-- 底部 -->
  <div th:replace="pub_footer"></div>

     <script type="text/javascript">
       $(function () {
         $('#sub').click(function () {
           let name = $('#name').val()
           let email = $('#email').val()
           let message = $('#message').val()
           console.log(name,email,message)
           if(name == ''){
             alert('请输入昵称')
             return  false;
           }
           if(!name.match(/^[\u4E00-\u9FA5]{2,4}$/)){
             alert('请输入正确的昵称！')
             $("#contact-name").focus();
             return  false;
           }
           if(email == ''){
             alert('请输入邮箱')
             return  false;
           }
           if(!email.match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)){
             alert('邮箱格式错误,请重新输入！')
             $("#contact-email").focus();
             return  false;
           }
           if(message == ''){
             alert('请留言')
             return  false;
           }
           if(message.length >255 ){
             alert('留言内容不能超过255位')
             $("#contact-message").focus();
             return  false;
           }
           $.ajax({
             type: "get",
             url: '/cms_message',
             data: {
               name: name,
               email: email,
               message: message,
             },
             dataType: "json",
             success: function (data) {
               // layer.msg(data.msg);
               //重新加载页面
               if (data == 1) {
                 setTimeout(function () {
                   alert("留言成功")
                   window.location.reload();
                 }, 2000);
               }else{
                 alert("留言失败")
               }
             }
           });
           return false
         });
       });
     </script>
  </body>
</html>
